<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view style="text-align: right;">
				<button v-if="$i18n.locale == 'en'" class="mini-btn" type="default" size="mini" @click="changeLanguage">中文</button>
				<button v-if="$i18n.locale == 'zh'" class="mini-btn" type="default" size="mini" @click="changeLanguage">english</button>
			</view>

				<view class="uni-form-item uni-column">
					<view class="title large" style="font-weight: bold;"> {{$t('index.realTime')}}</view>
					<view class="red large">{{$t('index.currentDate')}}:{{date}}</view>
					<view class="red large">{{$t('index.currentTime')}}:{{time}}</view>
					<view>{{$t('index.lastMinute')}}:{{timeresult0}}</view>
					<view class="red large">{{$t('index.calculationResults')}}:{{timeresult}}</view>
					<view>{{$t('index.oneMinuteLater')}}:{{timeresult1}}</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title" style="font-size: large; font-weight: bold;">{{$t('index.manual')}}</view>
					<view class="red large">{{$t('index.calculationResults')}}:{{inputresult}}</view>
					<input type="number" maxlength=4 @input="onKeyInput" class="uni-input" :placeholder="$t('index.pleaseEnterNumbers')" />
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:'',
				time: '',
				timeresult0:'',
				timeresult:'',
				timeresult1:'',
				inputtime:'',
				inputresult:''
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: this.$t('index.title')
			});
			this.auto();
			setInterval(this.auto, 1000);
		},
		
		methods: {
			changeLanguage:function(){
				let locale = this.$i18n.locale
				locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh';
				uni.setNavigationBarTitle({
				    title: this.$t('index.title')
				});
			},
			onKeyInput: function(event) {
			    this.inputresult = Math.pow((9999-event.target.value),2);
			},
			auto:function(){
				this.time = this.showtime();
				this.date = (new Date()).getFullYear()+"-" + ((new Date()).getMonth()+1) + "-" + (new Date()).getDate();
				console.log((new Date()).toUTCString());
				this.timeresult0 = this.computerulet(new Date(new Date().getTime() - 1000 * 60));
				this.timeresult = this.computerulet(new Date());
				this.timeresult1 = this.computerulet(new Date(new Date().getTime() + 1000 * 60));
			},
			computerulet:function(date){
				let h=date.getHours();
				let m=date.getMinutes();
				let s=date.getSeconds();
				m=this.checkTime(m);
				s=this.checkTime(s);
				let tmp = h+''+m;
				return Math.pow((9999-tmp),2);
			},
			showtime:function(){
				let date = new Date();
				let h=date.getHours();
				let m=date.getMinutes();
				let s=date.getSeconds();
				m=this.checkTime(m);
				s=this.checkTime(s);
				return h+":"+m+":"+s;
			},
			checkTime:function(i)
			{
				if (i<10){
					i="0" + i;
				}
				return i
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.red{
		color: red;
	}
	.large{
		font-size: large;
	}
</style>
